<div id="tb<?php echo $uniqid;?>" style="padding:5px">
	<table cellspacing="0" cellpadding="0"><tbody><tr>
		<td><a href="javascript:void(0);" onclick="pickgoodscardAdd();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span class="l-btn-text">增加</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" onclick="pickgoodscardEdit();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-bianji"></i><span class="l-btn-text">编辑</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" onclick="pickgoodscardDelete();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shanchu"></i><span class="l-btn-text">删除</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
		<td>&nbsp;&nbsp;<input id="pickgoodscardkeywords" v-model="params.pickgoodscardkeywords" style="width:200px" type="text" placeholder="输入提货卡名称或ID"
							  class="easyui-input textbox" @keyup.enter="init"></td>
		<td><a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
	</table>
</div>

<div class="con"  style="-moz-user-select:none;">
    <table id="pickgoodscardManage"></table>
</div>
<div id="pickgoodscarddlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
<script>
	var pickgoodscardManageVm = new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			params: {
				pickgoodscardkeywords: '',
			},
			initLoad:false,
		},
		filters: {
			formatDate(nS){
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}
		},
		mounted() {
			setTimeout(()=>{
				this.mounted();
			}, 200);
		},
		methods: {
			mounted: function (){
				this.init();
			},
			init: function (e) {
				if('undefined' !== typeof e){
					this.params.pickgoodscardkeywords = '';
				}
				pickgoodscardReload();
			},
		}
	});
	var pickgoodscardAdd=function(){
		$("#pickgoodscarddlg").dialog({
			title: '添加提货卡',
			closed: false,
			width: 800,
			height:600,
			cache: false,
			href: '/admin/pickgoodscard/add',
			modal: true,
			buttons:[{
				text:'保存',
				id:'pickgoodscardaddsubmit',
				iconCls:'icon-ok',
			},{
				text:'关闭',
				iconCls:'icon-no',
				handler:function(){
					$("#pickgoodscarddlg").dialog('close');
					delete pickgoodscardAddVM.form;
				}
			}]
		});
	}

	var pickgoodscardEdit=function(id){
		if('undefined' === typeof id && $('#pickgoodscardManage').datagrid('getSelected') == null){
			$.messager.alert('提示','请先选择要编辑的行！','warning');
			return false;
		}
		let row_id =  ('undefined' !== typeof id) ? id : $('#pickgoodscardManage').datagrid('getSelected').id;
		if (row_id){
			$("#pickgoodscarddlg").dialog({
				title: '编辑信息',
				closed: false,
				width: 700,
				height:500,
				cache: false,
				href: '/admin/pickgoodscard/edit?id='+row_id,
				modal: true,
				buttons:[{
					text:'保存',
					id:'pickgoodscardaddsubmit',
					iconCls:'icon-ok',
				},{
					text:'关闭',
					iconCls:'icon-no',
					handler:function(){$("#pickgoodscarddlg").dialog('close');}
				}]
			});
		}else{
			$.messager.alert('提示','请先选择要编辑的行！','warning');
		}
	}
	var pickgoodscardDelete=function(id){
		let row_id = id || $('#pickgoodscardManage').datagrid('getSelected').id;
		if (row_id){
			$.messager.confirm('提示','确定删除吗？',function(r){
				if(r==true){
					$.messager.progress();
					$.post('/admin/pickgoodscard/delete', {id:row_id}, function(data){
						$.messager.progress('close');
						if(data.ret==0){
							$.messager.show({
									title:'提示',
									msg:data.msg,
									timeout:3000,
									showType:'slide'
							});
							pickgoodscardReload();
						}else{
							$.messager.alert('提示',data.msg,'warning');
						}
					},'json');
				}
			});
		}else{
			$.messager.alert('提示','请先选择要删除的行！','warning');
		}
	}
	var pickgoodscardReload=function(){
		if(pickgoodscardManageVm.initLoad){
			pickgoodscardManageVm.initLoad = false;
		}else{
			$("#pickgoodscardManage").datagrid('load', pickgoodscardManageVm.params);
		}
	}
	var pickgoodscardSearch=function(){
		var height = $(window).height() - $(".top").height() - 46;
		var width = $(window).width() - $(".leftmenu").width() - 8;
		$("#pickgoodscardManage").datagrid({
			title: '提货卡设置',
			width: width,
			height: height,
			singleSelect:true,//如果为true，则只允许选择一行
			striped:true,//是否显示斑马线效果。
			rownumbers:false,//如果为true，则显示一个行号列。
			pagination:true,//是否显示分页
			pageSize:10,
			pageList:[10,15,20,25],
			method:'post',
			sortName:'id',
			sortOrder:'desc',
			url:'/admin/pickgoodscard/index',
			queryParams : pickgoodscardManageVm.params,
			fitColumns:true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap:true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck:false,
			checkOnSelect:true,
			toolbar: '#tb<?php echo $uniqid;?>',
			columns:[[
				{field:'id',title:'ID',width:fixWidth(3),align:'center'},
				{field:'type_text',title:'卡类型',width:fixWidth(3),align:'center'},
				{field:'name',title:'名称',width:fixWidth(10),align:'left'},
				{field:'amount',title:'面值',width:fixWidth(5),align:'center',formatter:function (value,rowData,rowIndex){
						return value + '元';
					}},
				{field:'goods_list',title:'包含商品',width:fixWidth(25),align:'center',formatter:function (value,rowData,rowIndex){
					let goods_content = '<div style="display: flex; align-items: center; max-width: 100%; flex-wrap: wrap;">';
					for(let i = 0; i < value.length; i ++){
						goods_content += '<a class="goods_tip" goods_id="'+value[i].id+'" title="'+value[i].title+'" href="javascript:void(0)" onclick="goodsTipClick(this)"><img style="width: 30px; height: 30px; margin: 0 2px; border-radius: 5px; border:1px solid #eee; overflow: hidden;" src="'+value[i].image+'"></a>';
					}
					goods_content += '</div>';
					return goods_content;
				}},
				{field:'valid_day',title:'有效期',width:fixWidth(5),align:'center',formatter:function (value,rowData,rowIndex){
						return value? value + '天':'永不过期';
					}},
				{field:'gettime_start',title:'可领取时间段',width:fixWidth(10),align:'center',formatter:function (value,rowData,rowIndex){
						return '<span>'+value+'</span><br>-<br><span>'+rowData.gettime_end+'</span>';
					}},
				{field:'validtime_start',title:'有效时间段',width:fixWidth(10),align:'center',formatter:function (value,rowData,rowIndex){
						return '<span>'+value+'</span><br>-<br><span>'+rowData.validtime_end+'</span>';
					}},
				{field:'created_at',title:'创建时间',width:fixWidth(10),align:'center'},
				{field: 'options', title: '操作', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
					let buttons = '<div class="table">';
					buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="pickgoodscardEdit(\'' + rowData.id + '\')"><span class="l-btn-text">编辑</span></span>';
					buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="pickgoodscardDelete(\'' + rowData.id + '\')"><span class="l-btn-text">删除</span></span>';
					return buttons + '</div>';
				}},
			]],
			onDblClickRow : function(index,field){
				pickgoodscardEdit();
			}
		});
		pickgoodscardManageVm.initLoad = true;
	}
	onDatagridResize("#pickgoodscardManage");
	var goodsTipClick = function (ele) {
		let e = $(ele);
		let content = '<p>商品ID：<span style="color: #ee650c">'+e.attr('goods_id')+'</span></p>';
		content += '<p>商品标题：<span style="color: #ee650c">'+e.attr('title')+'</span></p>';
		e.tooltip({
			position: 'right',
			content: content,
			hideEvent: 'click',
			onShow: function(){
				$(this).tooltip('tip').css({
					width: '300px',
					fontSize: '14px',
					lineHeight: '1.5em',
					backgroundColor: '#ffffff',
					border: '1px solid #666'
				});
			}
		});
		if('undefined' !== typeof e.tooltip('tip')){
			e.tooltip('destroy');
		}else{
			e.tooltip('show');
			e.tooltip('tip').click(function () {
				e.tooltip('destroy');
			});
		}
	}
	pickgoodscardSearch();
</script>
